<%@ page import="com.wuming.caiwu.security.SecurityHander" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ page import="java.util.Date" %>
<!DOCTYPE html>
<html>
<%
    long currentTime = new Date().getTime();
%>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <title>方案详情</title>
    <link rel="stylesheet" href="${allServerPath}static/layui/layui/css/layui.css">
    <link rel="stylesheet" href="${allServerPath}static/layui/css/formSelects-v4.css">
    <link rel="stylesheet" href="${allServerPath}static/css/insurancePurchase.css?t=<%=currentTime%>" media="all">
</head>
<body>
<div class="layui-row showTop">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>投保人信息核对</legend>
    </fieldset>
    <form class="layui-form" action="">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">投保人名称</label>
                <div class="layui-input-inline longer">
                    <input type="text" name="title" lay-verify="title" autocomplete="off"
                           placeholder="<%=SecurityHander.getCurrentUser().getCompany()%>" disabled="disabled"
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">方案名称</label>
                <div class="layui-input-inline longer">
                    <input type="text" name="title" lay-verify="title" autocomplete="off" placeholder="${plan.planName}"
                           disabled="disabled" class="layui-input">
                </div>
            </div>

            <div class="layui-inline" id="children1">
                <label class="layui-form-label">下级账号</label>
                <div class="layui-input-inline">
                    <select id="children" name="children" lay-filter="children">
                        <option value=""></option>
                    </select>
                </div>
            </div>
        </div>
    </form>
</div>
<div class="layui-row showTop">
    <fieldset class="layui-elem-field layui-field-title">
        <legend>被保险人信息录入</legend>
    </fieldset>
    <form class="layui-form" action="" id="tableOrder">
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">被保险人姓名</label>
                <div class="layui-input-inline">
                    <input type="text" name="name" lay-verify="title" autocomplete="off" placeholder=""
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">手机号</label>
                <div class="layui-input-inline">
                    <input type="text" name="mobile" lay-verify="title" autocomplete="off" placeholder=" "
                           class="layui-input">
                </div>
            </div>
            <div class="layui-inline">
                <label class="layui-form-label">身份证号</label>
                <div class="layui-input-inline">
                    <input type="text" name="certNo" lay-verify="title" autocomplete="off" placeholder=" "
                           class="layui-input">
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <div class="layui-inline">
                <label class="layui-form-label">122密码</label>
                <div class="layui-input-inline">
                    <input type="password" name="jiaojingPass" lay-verify="title" autocomplete="off" placeholder=" "
                           class="layui-input">
                </div>
            </div>
        </div>
        <input type="hidden" id="planId" value="${id}"/>
        <input type="hidden" id="attention" value="${plan.attention}"/>
        <button type="reset" style="display: none" id="reset" class="layui-btn layui-btn-primary">重置</button>
    </form>
    <div style="text-align: center;">
        <button class="layui-btn layui-btn-normal" type="button" name="btnSave" id="save" lay-submit="">添加学员</button>
        <button class="layui-btn layui-btn-normal" type="button" name="btnImport">批量导入</button>
    </div>
    <table class="layui-hide" id="demo" lay-filter="demo"></table>
    <div style="text-align: center;">
        <button class="layui-btn layui-btn-normal" type="button" name="btnSubmmit" lay-submit=""
                style="margin: 20px 0;">
            确认提交
        </button>
    </div>
</div>

<script src="${allServerPath}static/layui/layui/layui.js"></script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="del">删除</a>
</script>
<script>
    layui.use(['table', 'jquery', 'form'], function () {
        var table = layui.table;
        var $ = layui.jquery;
        var form = layui.form;

        $(document).ready(function () {
            $.ajax({
                type: 'get',
                url: '${allServerPath}web/member/getChildrens.htmls?memberId=' +<%=SecurityHander.getCurrentUserId()%>,
                dataType: 'JSON',
                success: function (obj) {
                    if (obj.success) {
                        console.log(obj.data);
                        $.each(obj.data, function (index, item) {
                            var s = "<option value='" + item.id + "'>" + item.company + "</option>";
                            $("#children").append(s);
                        })
                        form.render();
                    }
                }
            });
        });

        //监听工具条
        var memberId = '<%=SecurityHander.getCurrentUserId()%>';
        if ($("#children option:selected").val() != '') {
            memberId = $("#children option:selected").val();
        }

        form.on('select(children)', function (data) {
            if (data.value == "") {
                memberId = '<%=SecurityHander.getCurrentUserId()%>';
            } else {
                memberId = data.value;
            }
            table.reload('orderContent', {
                page: {
                    curr: 1
                }
                , where: {
                    "memberId": memberId
                }
            });
        });

        table.on('tool(demo)', function (obj) {
            var data = obj.data;
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    $.ajax({
                            url: '${allServerPath}web/cart/delete/' + data.id + ".htmls",
                            method: 'get',
                            dataType: 'json',
                            success: function (result) {
                                if (result.success) {
                                    obj.del();
                                    layer.close(index);
                                    table.reload('orderContent', {
                                        page: {
                                            curr: 1
                                        }
                                        , where: {
                                            "memberId": memberId
                                        }
                                    });
                                }
                            },
                            error: function () {
                                layer.msg('删除失败,请稍后重试.');
                            }
                        }
                    );
                });
            }
        });

        $("#save").click(function () {
            var name = $("input[name='name']").val();
            var mobile = $("input[name='mobile']").val();
            var jiaojingPass = $("input[name='jiaojingPass']").val();
            var certNo = $("input[name='certNo']").val();
            var planId = $("#planId").val();
            if (name == '' || null == name) {
                layer.msg('请填写姓名');
                return false;
            }
            if (mobile == '' || null == mobile) {
                layer.msg('请填写手机号');
                return false;
            }
            // if (jiaojingPass == '' || null == jiaojingPass) {
            //     layer.msg('请填写122密码');
            //     return false;
            // }
            if (certNo == '' || null == certNo) {
                layer.msg('请填写身份证号');
                return false;
            }
            $.ajax({
                type: 'post',
                url: '${allServerPath}web/cart/save.htmls',
                dataType: 'JSON',
                data: {
                    "name": name,
                    "mobile": mobile,
                    "jiaojingPass": jiaojingPass,
                    "certNo": certNo,
                    "planId": planId,
                    "memberId": memberId
                },
                success: function (obj) {
                    $("#reset").click();
                    table.reload('orderContent', {
                        page: {
                            curr: 1
                        }
                        , where: {
                            "memberId": memberId
                        }
                    });
                }
            });
        });

        var tabData = null;
        $("button[name='btnSubmmit']").click(function () {
            layer.open({
                title: '提示'
                ,btn:['我已知晓','我再想想']
                , area: ['1280px', '600px']
                , content: $("#attention").val()
                ,yes: function (index, layero) {
                    layer.close(index); //如果设定了yes回调，需进行手工关闭
                    layer.open({
                        title: '提示',
                        shadeClose: false,
                        content: '将清空表格中的学员并提交订单,请确认是否继续'
                        , btn: ['确定', '取消']
                        , yes: function (index, layero) {
                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                            console.log(tabData.length)
                            if (tabData.length == 0) {
                                layer.msg("没有数据可以提交");
                                return false;
                            }
                            var ids = '';
                            $.each(tabData, function (index) {
                                ids = ids + tabData[index].id + ",";
                            });
                            console.log(ids);
                            $.ajax({
                                type: 'post',
                                url: '${allServerPath}web/cart/generateOrder.htmls',
                                dataType: 'JSON',
                                data: {
                                    "memberId": memberId,
                                    "ids": ids
                                },
                                success: function (obj) {
                                    console.log(obj.data)
                                    var order = obj.data;
                                    // layer.msg("订单提交成功,请稍后查看.");
                                    // $("#reset").click();
                                    // table.reload('orderContent', {});
                                    //调用统一支付接口
                                    console.log(obj.message)
                                    var name = '以下学员已经投保相同方案:' +  obj.message;
                                    layer.open({
                                        content: name
                                        ,btn: ['我知道了']
                                        ,yes: function(index, layero){
                                            //按钮【按钮一】的回调
                                            layer.close(index);
                                            if (obj.total==1){
                                                return false;
                                            }
                                            $.ajax({
                                                type: 'post',
                                                url: '${allServerPath}wx/pay/wxAuth.htmls',
                                                dataType: 'JSON',
                                                data: {
                                                    payPrice: order.payPrice,
                                                    orderNo: order.orderNo
                                                },
                                                success: function (obj) {
                                                    layer.open({
                                                        type: 2, //类型，解析url
                                                        closeBtn: 1, //关闭按钮是否显示 1显示0不显
                                                        maxmin: true,//最大最小化 默认false
                                                        title: '请扫码支付(付款码有效期30分钟)', //页面标题
                                                        shadeClose: false, //点击遮罩区域是否关闭页面
                                                        shade: 0.8,  //遮罩透明度
                                                        area: ['900px', '500px'],  //弹出层页面比例
                                                        content: '${allServerPath}wx/pay/generateQrcode.htmls?url=' + encodeURIComponent(obj.data),  //弹出层的url
                                                        yes: function (index, layero) {  //该回调携带两个参数，分别为当前层索引、当前层DOM对象
                                                            layer.close(index); //如果设定了yes回调，需进行手工关闭
                                                            $("#reset").click();
                                                            table.reload('orderContent', {});
                                                        },
                                                        end: function () {
                                                            $("#reset").click();
                                                            table.reload('orderContent', {});
                                                        }
                                                    });
                                                }
                                            });
                                        }
                                        ,cancel: function(){
                                            //右上角关闭回调
                                            return false;
                                            //return false 开启该代码可禁止点击该按钮关闭
                                        }
                                    });
                                }
                            });
                        }
                        , btn2: function (index, layero) {
                            //取消的回调
                            return 2;
                            //return false 开启该代码可禁止点击该按钮关闭
                        }

                        , cancel: function () {
                            //右上角关闭回调
//                return false //开启该代码可禁止点击该按钮关闭
                        }
                    });
                }
            });

        });


        $('button[name="btnImport"]').on('click', function () {
            parent.window.tab.tabAdd({
                'id': 'cart_import',
                'title': '导入购物车信息',
                'icon': '',
                'url': '${allServerPath}web/cart/toImportCart.htmls?memberId=' + memberId + '&planId=${id}'
            });
        });

        table.render({
            elem: '#demo'
            , url: '${allServerPath}web/cart/list.htmls?t=' + Date.parse(new Date())
            , id: 'orderContent'
            , cellMinWidth: 80 //全局定义常规单元格的最小宽度，layui 2.2.1 新增
            , cols: [[
                {field: 'planName', title: '方案名称', align: 'center'}
                , {field: 'name', title: '姓名', align: 'center'}
                , {field: 'certNo', title: '身份证号', align: 'center'}
                , {field: 'mobile', title: '手机号', align: 'center'}
                , {field: 'jiaojingPass', title: '122密码', align: 'center'}
                , {field: 'planPrice', title: '投保金额', align: 'center'}
                , {fixed: 'right', title: '操作', width: 250, align: 'center', toolbar: '#barDemo'}
            ]]
            , where: {
                "memberId": memberId,
                "planId": '${id}'
            }, //如果无需传递额外参数，可不加该参数
            method: 'get', //如果无需自定义HTTP类型，可不加该参数
            page: false,
            limits: [10, 20, 30, 50, 100, 200],
            limit: 10,
            request: {
                pageName: 'pageIndex', //页码的参数名称，默认：page
                limitName: 'pageSize'
            }, //如果无需自定义请求参数，可不加该参数
            response: {
                statusName: 'code' //数据状态的字段名称，默认：code
                , statusCode: 200 //成功的状态码，默认：0
                , msgName: 'message' //状态信息的字段名称，默认：msg
                , countName: 'total' //数据总数的字段名称，默认：count
                , dataName: 'data' //数据列表的字段名称，默认：data
            }, //如果无需自定义数据响应名称，可不加该参数
            done: function (res, curr, count) {
                //如果是异步请求数据方式，res即为你接口返回的信息。
                //如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
                console.log(res.data);

                tabData = res.data;

                //得到当前页码
                console.log(curr);

                //得到数据总量
                console.log(count);
            },
            text: {
                none: '暂无相关数据' //默认：无数据。注：该属性为 layui 2.2.5 开始新增
            }
        });
    });
</script>
</body>
</html>
